<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts'

const chartRef = ref(null);
let myChart = null;

onMounted(() => {
  // 添加延迟以确保 china.js 已加载
  setTimeout(() => {
    initChart();
  }, 100);
});

const initChart = () => {
  if (!chartRef.value) return;
  if (!echarts.getMap('china')) {
    // 显示错误信息
    chartRef.value.innerHTML = '<div style="color: #fff; text-align: center; padding: 50px;">地图数据加载失败</div>';
    return;
  }
  try {
    myChart = echarts.init(chartRef.value);
    const option = {
      backgroundColor: 'transparent',
      legend: {
        show: true,
        orient: 'vertical',
        left: 'right',
        bottom: '20px',
        textStyle: {
          color: '#fff',
          fontSize: 12
        },
        data: ['西安 Top3', '西宁 Top3', '银川 Top3'],
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 12
      },
      geo: {
        map: 'china',
        roam: true,
        zoom: 1.2,
        center: [104, 35],
        silent: false,
        itemStyle: {
          areaColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(2, 33, 77, 0.6)'
            }, {
              offset: 1, color: 'rgba(2, 33, 77, 0.2)'
            }]
          },
          borderColor: '#02a6b5',
          borderWidth: 1,
          shadowColor: 'rgba(2, 166, 181, 0.3)',
          shadowBlur: 10
        },
        emphasis: {
          label: {
            show: true,
            color: '#fff',
            fontSize: 12
          },
          itemStyle: {
            areaColor: 'rgba(2, 166, 181, 0.3)'
          }
        },
        label: {
          show: false
        }
      },
      series: [
        // 城市标记点
        {
          name: '城市标记',
          type: 'effectScatter', // 散点
          coordinateSystem: 'geo', // 坐标系
          geoIndex: 0, // 地图索引
          // 数据
          data: [
            { name: '北京', value: [116.46, 39.92], relatedCity: '北京' },
            { name: '上海', value: [121.48, 31.22], relatedCity: '上海' },
            { name: '广州', value: [113.23, 23.16], relatedCity: '广州' },
            { name: '西安', value: [108.95, 34.27], relatedCity: '西安' },
            { name: '西宁', value: [101.74, 36.56], relatedCity: '西宁' },
            { name: '银川', value: [106.27, 38.47], relatedCity: '银川' },
            { name: '武汉', value: [114.31, 30.52], relatedCity: '武汉' },
            { name: '郑州', value: [113.65, 34.76], relatedCity: '郑州' },
            { name: '广州', value: [113.23, 23.16], relatedCity: '广州' },
            { name: '哈尔滨', value: [126.63, 45.75], relatedCity: '哈尔滨' },
            { name: '乌鲁木齐', value: [87.68, 43.77], relatedCity: '乌鲁木齐' },
          ],
          symbol: 'circle', // 圆形
          symbolSize: 10, // 圆点大小
          // 颜色
          itemStyle: {
            color: '#ffeb3b',
            borderColor: '#ffc107',
            borderWidth: 2,
            shadowColor: 'rgba(255, 235, 59, 0.8)',
            shadowBlur: 10
          },
          // 标签
          label: {
            show: true,
            position: 'right',
            color: '#fff',
            fontSize: 12,
            fontWeight: 'bold',
            formatter: '{b}',
            offset: [8, 0]
          },
          // 水波抖动
          rippleEffect: {
            brushType: 'stroke',
            color: '#ffeb3b',
            period: 4,
            scale: 2.5
          }
        },
        // 西安 Top3 航线 - 黄色
        {
          name: '西安 Top3',
          type: 'lines',
          coordinateSystem: 'geo',
          geoIndex: 0,
          zlevel: 2,
          data: [
            { name: '西安-北京', coords: [[108.95, 34.27], [116.46, 39.92]], relatedCity: '西安' },
            { name: '西安-上海', coords: [[108.95, 34.27], [121.48, 31.22]], relatedCity: '西安' },
            { name: '西安-广州', coords: [[108.95, 34.27], [113.23, 23.16]], relatedCity: '西安' },
            { name: '西安-银川', coords: [[108.95, 34.27], [106.27, 38.47]], relatedCity: '西安' },
            { name: '西安-西宁', coords: [[108.95, 34.27], [101.74, 36.56]], relatedCity: '西安' },
          ],
          lineStyle: {
            color: '#f57474',
            width: 1,
            opacity: 0.9,
            curveness: 0.2 // 
          },
          effect: {
            show: true,
            period: 3,
            trailLength: 0,   
            color: '#f57474',
            symbolSize: 8,    
            symbol: 'arrow' // plane : 飞机 arrow : 箭头
          }
        },
        // 西宁 Top3 航线 - 绿色
        {
          name: '西宁 Top3',
          type: 'lines',
          coordinateSystem: 'geo',
          geoIndex: 0,
          zlevel: 1,
          data: [
            { name: '西宁-北京', coords: [[101.74, 36.56], [116.46, 39.92]], relatedCity: '西宁' },
            { name: '西宁-上海', coords: [[101.74, 36.56], [121.48, 31.22]], relatedCity: '西宁' },
            { name: '西宁-西安', coords: [[101.74, 36.56], [108.95, 34.27]], relatedCity: '西宁' },
            { name: '西宁-银川', coords: [[101.74, 36.56], [106.27, 38.47]], relatedCity: '西宁' },
            { name: '西宁-武汉', coords: [[101.74, 36.56], [114.31, 30.52]], relatedCity: '西宁' },
            { name: '武汉-哈尔滨', coords: [[114.31, 30.52], [126.63, 45.75]], relatedCity: '西宁' },
            { name: '武汉-乌鲁木齐', coords: [[114.31, 30.52], [87.68, 43.77]], relatedCity: '西宁' },
            { name: '西宁-郑州', coords: [[101.74, 36.56], [113.65, 34.76]], relatedCity: '西宁' },
            { name: '西宁-广州', coords: [[101.74, 36.56], [113.23, 23.16]], relatedCity: '西宁' }
          ],
          lineStyle: {
            color: '#ffb025',
            width: 1,
            opacity: 0.9,
            curveness: 0.2
          },
          effect: {
            show: true,
            period: 3,
            trailLength: 0,
            color: '#ffb025',
            symbolSize: 8,
            symbol: 'arrow'
          }
        },
        // 银川 Top3 航线 - 蓝色
        {
          name: '银川 Top3',
          type: 'lines',
          coordinateSystem: 'geo',
          geoIndex: 0,
          zlevel: 1,
          data: [
            { name: '银川-北京', coords: [[106.27, 38.47], [116.46, 39.92]], relatedCity: '银川' },
            { name: '银川-上海', coords: [[106.27, 38.47], [121.48, 31.22]], relatedCity: '银川' },
            { name: '银川-西安', coords: [[106.27, 38.47], [108.95, 34.27]], relatedCity: '银川' },
            { name: '银川-广州', coords: [[106.27, 38.47], [113.23, 23.16]], relatedCity: '银川' },
            { name: '银川-西宁', coords: [[106.27, 38.47], [101.74, 36.56]], relatedCity: '银川' },
          ],
          lineStyle: {
            color: '#64b5f6',
            width: 1,
            opacity: 0.9,
            curveness: 0.2
          },
          effect: {
            show: true,
            period: 3,
            trailLength: 0,
            color: '#64b5f6',
            symbolSize: 8,
            symbol: 'arrow'
          }
        }
      ]
    };

    myChart.setOption(option);

    // 添加 legendselectchanged 事件监听
    myChart.on('legendselectchanged', function (params) {
      const selected = params.selected;
      const series = option.series;

      series.forEach(seriesItem => {
        seriesItem.data.forEach(dataItem => {
          if (dataItem.relatedCity) {
            const isVisible = selected[dataItem.relatedCity + ' Top3'];
            dataItem.symbolSize = isVisible ? 10 : 0; // 控制点的显示与隐藏
          }
        });
      });
      myChart.setOption(option);
    });

    // 添加窗口大小变化监听
    const handleResize = () => {
      if (myChart) {
        myChart.resize();
      }
    };

    window.addEventListener('resize', handleResize);

    // 清理函数
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
      if (myChart) {
        myChart.dispose();
      }
    });

  } catch (error) {
    console.error('Error initializing map:', error);
    chartRef.value.innerHTML = '<div style="color: #fff; text-align: center; padding: 50px;">地图初始化失败</div>';
  }
};
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>

<style lang="scss" scoped>
/* 您可以根据需要保留或修改样式 */
</style>
